<script lang="ts">
  import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
</script>

<div
  class="w-full max-w-[300px] space-y-4 rounded border border-[#EAEAEA] bg-[#FCFCFC] p-4 hover:scale-95 dark:border-neutral-600"
>
  <img src="/course-banner.jpg" alt="tutor" class="h-full w-full object-cover" />
  <div class="w-full space-y-2">
    <p class="line-clamp-2 text-lg font-semibold">
      How to Choose the Right Online Course to Boost Your Career
    </p>
    <span class="inline-flex items-center gap-1 text-[#282828]">
      <Calendar class="fill-black" />
      <p class="text-xs">Mon Jun 05, 2023</p>
    </span>
  </div>
</div>
